<template>
  <div class="container">
    <index-search-bar/>
    <!-- <index-card/> -->
    <div v-if="pageData" class="floor-container">
      <template v-for="(item, index) in pageData">
        <index-seckill v-if="item.name === 'seckill'" :key="index"/>
        <component v-else :key="index" :is="`${item.name}`" :form-data="item.data"/>
      </template>
    </div>
    <div v-else class="floor-container">
      <index-skeleton/>
    </div>
  </div>
</template>

<script>
import IndexComponents from './-index'
import Decors from '@/components/Decors'
import * as API_Pages from '@/api/pages'

export default {
  name: 'index',
  head() {
    return {
      title: `商城首页-${this.site.title}`
    }
  },
  components: { ...IndexComponents, ...Decors },
  data() {
    return {
      pageData: ''
    }
  },
  created() {
    this.getIndexData()
  },
  methods: {
    async getIndexData() {
      let page = {}
      try {
        const res = await API_Pages.getIndexPage()
        if (res && res.page_data && res.page_data.indexOf('[') === 0) {
          page = res
        } else {
          page.page_data = '[]'
        }
      } catch (e) {
        page.page_data = '[]'
      }
      this.pageData = JSON.parse(page.page_data)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../assets/styles/color";
.container {
  background-color: #F9F9F9;
  padding-bottom: 20px;
}
.floor-container {
  width: 1210px;
  margin: 0 auto;
}
</style>
